<template>
  <Dialog
    v-model="show"
    :title="props.data.id ? t('category_setting.编辑分类') : t('category_setting.添加分类')"
    width="700px"
    @confirm="handleConfirm"
    @close="handleClose"
  >
    <div>
      <LangTabs v-model="lang" />
      <el-form :model="form" label-width="160px" :rules="rules" ref="formRef">
        <el-form-item :label="t('category_setting.分类名称')" :prop="'name' + lang">
          <el-input
            v-model="form['name' + lang]"
            :placeholder="t('category_setting.请输入分类名称')"
          />
        </el-form-item>
        <el-form-item :label="t('category_setting.分类图片')" prop="iconUrl">
          <UploadFile
            v-model="form.iconUrl"
            :limit="1"
            :file-size="2"
            :tip="t('category_setting.请上传分类图片')"
            single-mode
          />
        </el-form-item>
        <el-form-item :label="t('category_setting.排序')" prop="sort">
          <el-input-number
            v-model="form.sort"
            :min="0"
            :max="999999999"
            :placeholder="t('category_setting.请输入排序')"
          />
        </el-form-item>
      </el-form>
    </div>
  </Dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import Dialog from "@/components/dialog.vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";
import LangTabs from "@/components/LangTabs.vue";
import { setAttrLangs } from "@/i18n/tools";
import { useI18n } from "vue-i18n";
import UploadFile from "@/components/UploadFile.vue";

const { t, locale } = useI18n();
const lang = ref(locale.value);
const show = defineModel("show", {
  type: Boolean,
  default: false,
});
const emit = defineEmits(["update:show", "refresh"]);
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const formRef = ref(null);
const form = ref({
  sort: 0,
  iconUrl: [],
});

const rules = ref({
  name: [{ required: true, message: t('category_setting.请输入分类名称') }],
  sort: [{ required: true, message: t('category_setting.请输入排序') }],
  iconUrl: [{ required: true, message: t('category_setting.请上传分类图片') }],
});
setAttrLangs(form.value, "name", "");
setAttrLangs(rules.value, "name", {
  required: true,
  message: t('category_setting.请输入分类名称'),
  trigger: "blur",
});

watch(
  () => show.value,
  (newVal) => {
    if (newVal && props.data.id) {
      form.value = {
        ...props.data,
        iconUrl: props.data.iconUrl ? [{ url: props.data.iconUrl }] : [],
      };
    }
  }
);

const handleConfirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const params = {
        ...form.value,
        status: 1,
        iconUrl:
          typeof form.value.iconUrl === "string"
            ? form.value.iconUrl
            : form.value.iconUrl?.[0]?.url,
      }
      delete params.name;
      Api[props.data.id ? "updateBusinessCategory" : "addBusinessCategory"](params).then((res) => {
        if (res.status == 200) {
          ElMessage.success(t('category_setting.操作成功'));
          handleClose();
          emit("refresh");
        }
      });
    }
  });
};
const handleClose = () => {
  formRef.value.resetFields();
  form.value = {
    name: "",
    iconUrl: [],
    sort: 0,
  };
  emit("update:show", false);
};
</script>
<style lang="scss" scoped></style>
